<template>
 <div>
    <!-- <el-tag
    >成都恒容</el-tag> -->
    <!-- <el-button type="text" size="small" >添加里程数</el-button> -->
    <!-- //添加弹出框 -->
     <el-dialog title="提示" :visible.sync="dialogVisible" >
       <el-form  label-width="80px">
       <el-form-item label="里程数">
         <el-input v-model="totalKM"></el-input>
       </el-form-item>
       <el-form-item label="新增任务" >
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane 
    v-for="(pred,key) in taskList "
    :key="key"
    :label="key" :name="key">
    <el-table
    :data="taskList[key]"
    border
    style="width: 80%">
    <el-table-column
      prop="taskName"
      label="任务类型"
      width="180">
    </el-table-column>
    <el-table-column
      label="次数"
      width="180">
    <template slot-scope="scope">
      <input  placeholder="请输入次数" :name="key" v-model="scope.row.inputVal"  style="width:100px;height:30px;border:none;outline:none" />
    </template>
    </el-table-column>
      <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
      <el-button @click="tijiao(scope.row.id,scope.row.inputVal)">确定</el-button>
      </template>

    </el-table-column>
  </el-table>
    </el-tab-pane>

  </el-tabs>
</el-form-item> 
</el-form>
       <span slot="footer" class="dialog-footer" >
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="confirm();dialogVisible=false" > 确 定</el-button>
       </span>
     </el-dialog>
  <el-table
	    border
	    style="width: 100%"
	    :data="userList"
		>
	    <el-table-column
	      prop="id"
	      label="编号"
	      width="180">
	    </el-table-column>
	    <el-table-column
	      prop="applyUserName"
	      label="申请人姓名">
	    </el-table-column>
		<el-table-column
		  prop="setoffTime"
		  label="出发时间">
		</el-table-column>
        <el-table-column
		  prop="setoffAddress"
		  label="出发地址">
		</el-table-column>
        <el-table-column
		  prop="arrivalAddress"
		  label="到达地址">
		</el-table-column>
        <el-table-column
		  label="操作">
          <template scope="scope">
        <el-button
          @click="updateInfoInit(scope.row);dialogVisible=true"
          >添加里程数/任务</el-button>
          </template>
          
		</el-table-column>
	  </el-table>
  </div>

     <!-- <el-button type="text" size="small" @click="dialogVisible = true">添加用户</el-button> -->
  

	  
</template>
<script>
import request from '../api/request'
export default {
    data(){
        return{
           activeName: '计次任务',
      taskList:{},
        TaskAndOrderMapping:{},
          mappings:[],
         userList:[],
         dialogVisible:false,
         totalKM:'',
         userId:''
        }
    },
     created(){
      this.getDetails()
      this.getAllTask()
      },
    methods: {
         updateInfoInit(data){
        this.updateDetail=true,
        this.userId= data.id;
        console.log(this.userId)
        
      },
      //获取所有任务
      getAllTask(){
        request({
          url:'/order/getAllTask',
          method:'post',
        }).then(res => {
          console.log(res.data)
          this.taskList = res.data
          for (let key in this.taskList) {
            for (let item of this.taskList[key]) {
               Vue.set(item,'inputVal','')
            }
          }
        })
      },
        //  确定
      tijiao(id,value){
         var TaskAndOrderMapping = {
            taskId:id,
            total:value
         }
         this.mappings=[TaskAndOrderMapping]
      },
        getDetails(){
           request({
               url:'/order/getAdminComfirm',
               method:'get',
           }).then(res => {
               console.log(res.data)
               this.userList = res.data
           })
        },
        confirm(id){
            request({
                url:'/order/confirmTotal',
                method:'post',
                data:{
                    orderId: this.userId,
                    totalKM: this.totalKM,
                    mappings: this.mappings
                }
            }).then(res => {
                this.$confirm('添加成功')
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>